﻿<div [@routerTransition] id="TenantDashboard">
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>成本分析与报告</span>
                </h3>
                <span class="m-section__sub">
                    分析与报告
                </span>
            </div>
        </div>
    </div>

    <div class="m-content">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet">
                    <div class="m-portlet__body">
                        <div class="row">
                            <div
                                class="col-6"
                                *ngFor="let item of costChart1.costData; index as idx"
                                [ngStyle]="{ 'border-right': item.rightStyle, 'border-bottom': item.bottomStyle }"
                            >
                                <div class="m-widget24">
                                    <div class="m-widget24__item">
                                        <h4 class="m-widget24__title">
                                            {{ item.costType }}
                                        </h4>
                                        <br />
                                        <span class="m-widget24__desc"> 最近{{ item.data.length }}个月支出情况 </span>
                                        <span class="m-widget24__stats m--font-info">
                                            <span class="m--font-bolder" *ngIf="idx !== 1">￥</span>
                                            {{ item.value }}
                                            <span class="m--font-bolder" *ngIf="idx === 1">H</span>
                                        </span>
                                        <div
                                            class="m-widget24__chart"
                                            style="height:100px; width: 100%;"
                                            *ngIf="item.changeData"
                                        >
                                            <ngx-charts-line-chart
                                                [results]="item.changeData"
                                                [showGridLines]="false"
                                                [animations]="false"
                                                [tooltipDisabled]="true"
                                                [customColors]="costChart1.customColors"
                                                [curve]="costChart1.curve"
                                            ></ngx-charts-line-chart>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height sales-summary-chart">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    收入趋势
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body" style=" min-height: 308px;">
                        <!-- <div class="row list-separated">
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    批价/暂结价
                                </h6>
                                <div>
                                    <span
                                        counto
                                        class="m--font-danger m--font-bolder"
                                        [step]="30"
                                        [duration]="1"
                                        [countFrom]="0"
                                        [countTo]="salesSummaryChart.totalSales"
                                        (countoChange)="salesSummaryChart.totalSalesCounter = $event"
                                    >
                                        {{ salesSummaryChart.totalSalesCounter.toFixed(0) }}
                                    </span>
                                    <span class="m--font-danger m--font-bolder">￥</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    合同金额
                                </h6>
                                <div class="uppercase font-hg font-green-haze">
                                    <span
                                        counto
                                        class="m--font-warning m--font-bolder"
                                        [step]="30"
                                        [duration]="1"
                                        [countFrom]="0"
                                        [countTo]="salesSummaryChart.revenue"
                                        (countoChange)="salesSummaryChart.revenuesCounter = $event"
                                    >
                                        {{ salesSummaryChart.revenuesCounter.toFixed(0) }}
                                    </span>
                                    <span class="m--font-warning m--font-bolder">￥</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    已收款金额
                                </h6>
                                <div class="uppercase font-hg font-purple">
                                    <span
                                        counto
                                        class="m--font-info m--font-bolder"
                                        [step]="30"
                                        [duration]="1"
                                        [countFrom]="0"
                                        [countTo]="salesSummaryChart.expenses"
                                        (countoChange)="salesSummaryChart.expensesCounter = $event"
                                    >
                                        {{ salesSummaryChart.expensesCounter.toFixed(0) }}
                                    </span>
                                    <span class="m--font-success m--font-bolder">￥</span>
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-3 col-xs-6">
                                <h6>
                                    已结算金额
                                </h6>
                                <div class="uppercase font-hg font-blue-sharp">
                                    <span
                                        counto
                                        class="m--font-info m--font-bolder"
                                        [step]="30"
                                        [duration]="1"
                                        [countFrom]="0"
                                        [countTo]="salesSummaryChart.growth"
                                        (countoChange)="salesSummaryChart.growthCounter = $event"
                                    >
                                        {{ salesSummaryChart.growthCounter.toFixed(0) }}
                                    </span>
                                    <span class="m--font-info m--font-bolder">￥</span>
                                </div>
                            </div>
                        </div> -->
                        <ngx-charts-area-chart
                            [results]="costChart1.srData"
                            [showXAxisLabel]="true"
                            showYAxisLabel="true"
                            [xAxis]="true"
                            [yAxis]="true"
                            [showGridLines]="false"
                            [tooltipDisabled]="false"
                            [customColors]="costChart1.customColors"
                            [curve]="costChart1.curve"
                        >
                        </ngx-charts-area-chart>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12 col-sm-12">
                <div class="m-portlet">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    年度成本对比
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="row">
                            <div class="col-12"><div id="c1"></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="m-portlet m-portlet--tabs">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    {{ costChart2.selectedModelData?.result1?.title }}
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="nav nav-tabs m-tabs-line m-tabs-line--right" role="tablist">
                                <li class="nav-item m-tabs__item" *ngFor="let item of costChart2.modelData">
                                    <a
                                        class="nav-link m-tabs__link"
                                        [ngClass]="{ active: costChart2.selectedModelData === item }"
                                        data-toggle="tab"
                                        role="tab"
                                        (click)="costChart2.selectedModelData = item"
                                    >
                                        {{ item.result1?.title }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="m-portlet__body">
                        <div class="row">
                            <div class="col-md-4 col-sm-12">
                                <div class="m-widget14" style="padding-top: 0;">
                                    <div class="m-widget14__header m--margin-bottom-30">
                                        <span class="m-widget14__title">
                                            {{ costChart2.selectedModelData?.result1?.desc }}
                                        </span>
                                    </div>
                                    <div class="m-widget14__chart" style="height:225px;">
                                        <ngx-charts-bar-vertical-stacked
                                            [results]="costChart2.selectedModelData?.result1?.data"
                                            [customColors]="costChart2.customColors"
                                        >
                                        </ngx-charts-bar-vertical-stacked>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 col-sm-12">
                                <div class="m-widget14" style="padding-top: 0;">
                                    <div class="m-widget14__header">
                                        <span class="m-widget14__title">
                                            {{ costChart2.selectedModelData?.result2?.desc }}
                                        </span>
                                    </div>
                                    <div class="m-widget14__chart" style="height:250px;">
                                        <ngx-charts-advanced-pie-chart
                                            [results]="costChart2.selectedModelData?.result2?.data"
                                            [customColors]="costChart2.customColors"
                                            [tooltipDisabled]="true"
                                        >
                                        </ngx-charts-advanced-pie-chart>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-12">
                <div class="m-portlet m-portlet--tabs">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    {{ costChart3.selectedWorkshopData?.result1?.title }}
                                </h3>
                            </div>
                        </div>
                        <div class="m-portlet__head-tools">
                            <ul class="nav nav-tabs m-tabs-line m-tabs-line--right" role="tablist">
                                <li class="nav-item m-tabs__item" *ngFor="let item of costChart3.workshopData">
                                    <a
                                        class="nav-link m-tabs__link"
                                        [ngClass]="{ active: costChart3.selectedWorkshopData === item }"
                                        data-toggle="tab"
                                        role="tab"
                                        (click)="costChart3.selectedWorkshopData = item"
                                    >
                                        {{ item.result1?.title }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="row">
                            <div class="col-md-4 col-sm-12">
                                <div>
                                    <h5 class="m-widget14__title">
                                        {{ costChart3.selectedWorkshopData?.result1?.desc }}
                                    </h5>
                                </div>

                                <div class="m-widget4 m-widget4--chart-bottom m--margin-top-20">
                                    <div
                                        class="m-widget4__item"
                                        *ngFor="let row of costChart3.selectedWorkshopData?.result1?.data"
                                    >
                                        <div class="m-widget4__ext">
                                            <a href="javascript:;" class="m-widget4__icon m--font-brand">
                                                <i class="fa flaticon-coins"></i>
                                            </a>
                                        </div>
                                        <div class="m-widget4__info">
                                            <span class="m-widget4__text">
                                                {{ row.name }}
                                            </span>
                                        </div>
                                        <div class="m-widget4__ext">
                                            <span class="m-widget4__number m--font-accent">
                                                {{ row.value }}</span
                                            >
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="m-portlet-fit--sides"
                                    *ngIf="costChart3.selectedWorkshopData?.result1?.changeData"
                                    style="height:120px;"
                                >
                                    <ngx-charts-area-chart
                                        [results]="costChart3.selectedWorkshopData?.result1?.changeData"
                                        [customColors]="costChart3.customColors"
                                    ></ngx-charts-area-chart>
                                </div>
                            </div>
                            <div class="col-md-1 col-sm-12"></div>

                            <div class="col-md-7 col-sm-12">
                                <div>
                                    <h5 class="m-widget14__title">
                                        {{ costChart3.selectedWorkshopData?.result2?.desc }}
                                    </h5>
                                </div>
                                <div class="m-widget11  m--margin-top-20">
                                    <div class="table-responsive">
                                        <table class="table">
                                            <thead>
                                                <tr>
                                                    <td class="m-widget11__app">成本类型</td>
                                                    <td class="m-widget11__change">趋势</td>
                                                    <td class="m-widget11__price">平均值</td>
                                                    <td class="m-widget11__total">总计</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr *ngFor="let stat of costChart3.selectedWorkshopData?.result2?.data">
                                                    <td>{{ stat.name }}</td>
                                                    <td>
                                                        <div
                                                            class="m-widget11__chart"
                                                            *ngIf="stat.changeData"
                                                            style="height:50px; width: 200px"
                                                        >
                                                            <ngx-charts-line-chart
                                                                [results]="stat.changeData"
                                                                [showGridLines]="false"
                                                                [animations]="false"
                                                                [tooltipDisabled]="true"
                                                                [customColors]="costChart2.customColors"
                                                                [curve]="costChart2.curve"
                                                            ></ngx-charts-line-chart>
                                                        </div>
                                                    </td>
                                                    <td>{{ stat.avg }}</td>
                                                    <td>{{ stat.sum }}</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="m-portlet m-portlet--full-height">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    最近产品成本变化
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="m-widget11">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <td class="m-widget11__app">任务号/图号</td>
                                            <td class="m-widget11__change">名称</td>
                                            <td class="m-widget11__price">条码</td>
                                            <td class="m-widget11__total">变化值</td>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let stat of costChart5.productChange">
                                            <td>
                                                <span class="m-widget11__title"> {{ stat.taskNum }}</span>
                                                <span class="m-widget11__sub"> {{ stat.drawingNum }}</span>
                                            </td>
                                            <td>
                                                {{ stat.productName }}
                                            </td>
                                            <td>{{ stat.batch }}</td>
                                            <td><span *ngIf="stat.change > 0">+</span>{{ stat.change }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-lg-12">
                <!--Begin::Portlet-->
                <div class="m-portlet  m-portlet--full-height ">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <h3 class="m-portlet__head-text">
                                    最近成本事件
                                </h3>
                            </div>
                        </div>
                    </div>
                    <div class="m-portlet__body">
                        <div class="m-scrollable" data-scrollable="true" data-height="380" data-mobile-height="300">
                            <!--Begin::Timeline 2 -->
                            <div class="m-timeline-2">
                                <div class="m-timeline-2__items  m--padding-top-25 m--padding-bottom-30">
                                    <div
                                        class="m-timeline-2__item"
                                        *ngFor="let item of costChart5.eventChange; let i = index"
                                        [ngClass]="{ 'm--margin-top-30': i === 0 }"
                                    >
                                        <span class="m-timeline-2__item-time">{{
                                            item.time | momentFormat: "HH:mm"
                                        }}</span>
                                        <div class="m-timeline-2__item-cricle">
                                            <i *ngIf="i % 4 === 0" class="fa fa-genderless m--font-danger"></i>
                                            <i *ngIf="i % 4 === 1" class="fa fa-genderless m--font-success"></i>
                                            <i *ngIf="i % 4 === 2" class="fa fa-genderless m--font-warning"></i>
                                            <i *ngIf="i % 4 === 3" class="fa fa-genderless m--font-info"></i>
                                        </div>
                                        <div class="m-timeline-2__item-text  m--padding-top-5">
                                            由 {{ item.user }} 触发了 {{ item.name }} &nbsp; &nbsp; &nbsp; &nbsp;
                                            成本类型：{{ item.desc }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--End::Timeline 2 -->
                        </div>
                    </div>
                </div>

                <!--End::Portlet-->
            </div>
        </div>
    </div>
</div>
